<template>
  <div class="team-space-container">
    <!-- 未登录状态 -->
    <div v-if="!isLoggedIn" class="login-container">
      <a-result
        status="warning"
        title="您需要先登录团队空间"
        sub-title="登录后即可查看和管理您的团队空间"
      >
        <template #extra>
          <a-button type="primary" :loading="loginLoading" @click="handleSpaceLogin">
            立即登录
          </a-button>
        </template>
      </a-result>
    </div>

    <!-- 已登录状态 -->
    <div v-else class="space-layout">
      <!-- 左侧固定菜单 -->
      <div class="space-menu">
        <a-menu
          v-model:selectedKeys="selectedKeys"
          mode="inline"
          :style="{ flex: 1, borderRight: 0 }"
        >
          <a-menu-item key="created" @click="handleMenuClick('created')">
            <template #icon>
              <UserOutlined />
            </template>
            我创建的空间
            <template #extra>
              <a-tag v-if="myCreatedSpace" color="green">1</a-tag>
            </template>
          </a-menu-item>
          <a-menu-item key="joined" @click="handleMenuClick('joined')">
            <template #icon>
              <TeamOutlined />
            </template>
            我加入的空间
            <template #extra>
              <a-tag v-if="joinedSpaces.length > 0" color="blue">{{ joinedSpaces.length }}</a-tag>
            </template>
          </a-menu-item>
        </a-menu>
        <div class="menu-footer">
          <a-space>
            <a-button type="primary" @click="handleCreateTeamSpace" :disabled="hasCreatedSpace">
              创建空间
            </a-button>
            <a-button @click="showJoinModal = true" :disabled="joinedSpaces.length >= 3">
              加入空间
            </a-button>
          </a-space>
        </div>
      </div>

      <!-- 右侧内容区 -->
      <div class="space-main">
        <a-spin :spinning="loading">
          <!-- 我创建的空间 -->
          <div v-if="selectedKeys[0] === 'created' && !$route.params.spaceId">
            <div v-if="myCreatedSpace" class="space-detail">
              <!-- 顶部Banner和操作 -->
              <div class="space-banner">
                <img
                  class="banner-img"
                  src="https://images.unsplash.com/photo-1506744038136-46273834b3fb?auto=format&fit=crop&w=1200&q=80"
                  alt="团队Banner"
                />
                <div class="banner-mask"></div>
                <div class="banner-content">
                  <div class="banner-title">{{ myCreatedSpace.spaceName }}</div>
                  <div class="banner-desc">专注于前端创新与协作，打造高效、专业的团队空间。</div>
                  <div class="banner-actions">
                    <a-button type="primary">邀请成员</a-button>
                    <a-button>上传文件</a-button>
                    <a-button>空间设置</a-button>
                  </div>
                </div>
              </div>

              <!-- 空间信息 -->
              <div class="space-header">
                <div class="space-title">
                  <h2>{{ myCreatedSpace.spaceName }}</h2>
                  <div class="space-tags">
                    <a-tag color="success">创建者</a-tag>
                    <a-tag :color="getSpaceLevelColor(myCreatedSpace.spaceLevel)">
                      {{ getSpaceLevelText(myCreatedSpace.spaceLevel) }}
                    </a-tag>
                  </div>
                </div>
                <div class="space-meta">
                  <span class="meta-item">
                    <UserOutlined />
                    {{ myCreatedSpace.nickName }}
                  </span>
                  <span class="meta-item">
                    <CalendarOutlined />
                    创建于 {{ formatDate(myCreatedSpace.createTime) }}
                  </span>
                </div>
              </div>

              <!-- 统计卡片 -->
              <a-row :gutter="[16, 16]" class="space-stats">
                <a-col :span="8">
                  <a-card
                    class="stat-card members" :class="[getSpaceLevelClass(myCreatedSpace.spaceLevel)]"
                  >
                    <template #title>
                      <div class="card-title">
                        <TeamOutlined />
                        成员配额
                      </div>
                    </template>
                    <div class="stat-content">
                      <div class="stat-main">
                        <div class="stat-number">{{ myCreatedSpace.maxCount }}</div>
                        <div class="stat-label">最大成员数</div>
                      </div>
                      <a-progress
                        :percent="
                          (parseInt(myCreatedSpace.memberCount || 0) /
                            parseInt(myCreatedSpace.maxCount)) *
                          100
                        "
                        :stroke-color="getProgressColors(myCreatedSpace.spaceLevel)"
                        :show-info="false"
                      />
                      <div class="stat-info">已加入：{{ myCreatedSpace.memberCount || 0 }} 人</div>
                    </div>
                  </a-card>
                </a-col>
                <a-col :span="8">
                  <a-card
                    class="stat-card storage" :class="[getSpaceLevelClass(myCreatedSpace.spaceLevel)]"
                  >
                    <template #title>
                      <div class="card-title">
                        <HddOutlined />
                        存储空间
                      </div>
                    </template>
                    <div class="stat-content">
                      <div class="stat-main">
                        <div class="stat-number">{{ formatSize(myCreatedSpace.totalSize) }}</div>
                        <div class="stat-label">
                          已使用 / {{ formatSize(myCreatedSpace.maxSize) }}
                        </div>
                      </div>
                      <a-progress
                        :percent="
                          (parseInt(myCreatedSpace.totalSize) / parseInt(myCreatedSpace.maxSize)) *
                          100
                        "
                        :stroke-color="getProgressColors(myCreatedSpace.spaceLevel)"
                        :show-info="false"
                      />
                      <div class="stat-info">
                        剩余：{{
                          formatSize(
                            parseInt(myCreatedSpace.maxSize) - parseInt(myCreatedSpace.totalSize)
                          )
                        }}
                      </div>
                    </div>
                  </a-card>
                </a-col>
                <a-col :span="8">
                  <a-card
                    class="stat-card files" :class="[getSpaceLevelClass(myCreatedSpace.spaceLevel)]"
                  >
                    <template #title>
                      <div class="card-title">
                        <FileImageOutlined />
                        图片配额
                      </div>
                    </template>
                    <div class="stat-content">
                      <div class="stat-main">
                        <div class="stat-number">{{ myCreatedSpace.totalCount }}</div>
                        <div class="stat-label">已上传 / {{ myCreatedSpace.maxCount }} 张</div>
                      </div>
                      <a-progress
                        :percent="
                          (parseInt(myCreatedSpace.totalCount) /
                            parseInt(myCreatedSpace.maxCount)) *
                          100
                        "
                        :stroke-color="getProgressColors(myCreatedSpace.spaceLevel)"
                        :show-info="false"
                      />
                      <div class="stat-info">
                        剩余：{{
                          parseInt(myCreatedSpace.maxCount) - parseInt(myCreatedSpace.totalCount)
                        }}
                        张
                      </div>
                    </div>
                  </a-card>
                </a-col>
              </a-row>

              <!-- 公告栏/动态/荣誉/快捷入口/活跃成员 -->
              <div class="space-extra-row pro-cards">
                <div class="pro-card notice-card">
                  <div class="pro-card-title">公告栏</div>
                  <ul class="notice-list">
                    <li>🎉 <b>团队空间全新升级</b>，欢迎体验！</li>
                    <li>📢 <b>本周五下午3点团队例会</b>，欢迎准时参加。</li>
                    <li>💡 <b>新成员欢迎会</b>即将开启，敬请关注。</li>
                  </ul>
                  <div class="notice-footer">更多公告 &gt;</div>
                </div>
                <div class="pro-card quick-card">
                  <div class="pro-card-title">快捷入口</div>
                  <div class="quick-btns">
                    <a-button class="quick-btn" type="default" shape="round" icon="user"
                      >成员管理</a-button
                    >
                    <a-button class="quick-btn" type="default" shape="round" icon="folder"
                      >文件库</a-button
                    >
                    <a-button class="quick-btn" type="default" shape="round" icon="project"
                      >任务看板</a-button
                    >
                    <a-button class="quick-btn" type="default" shape="round" icon="setting"
                      >团队设置</a-button
                    >
                  </div>
                </div>
                <div class="pro-card honor-card">
                  <div class="pro-card-title">团队荣誉</div>
                  <div class="honor-badges">
                    <div class="badge gold">
                      <img src="https://img.icons8.com/color/48/000000/trophy.png" /><span
                        >年度最佳</span
                      >
                    </div>
                    <div class="badge silver">
                      <img src="https://img.icons8.com/color/48/000000/medal2--v2.png" /><span
                        >活跃达人</span
                      >
                    </div>
                    <div class="badge bronze">
                      <img src="https://img.icons8.com/color/48/000000/crown.png" /><span
                        >创新先锋</span
                      >
                    </div>
                  </div>
                </div>
                <div class="pro-card activity-card">
                  <div class="pro-card-title">近期动态</div>
                  <ul class="activity-list">
                    <li>
                      <span class="dot"></span>小明
                      <span class="activity-action">上传了新图片</span>
                      <span class="activity-time">2分钟前</span>
                    </li>
                    <li>
                      <span class="dot"></span>李雷
                      <span class="activity-action">完成了任务"官网重构"</span>
                      <span class="activity-time">10分钟前</span>
                    </li>
                    <li>
                      <span class="dot"></span>王芳 <span class="activity-action">加入团队</span>
                      <span class="activity-time">1小时前</span>
                    </li>
                  </ul>
                </div>
                <div class="pro-card members-card">
                  <div class="pro-card-title">活跃成员</div>
                  <div class="members-wall-pro">
                    <div class="member-avatar-pro" v-for="i in 8" :key="i">
                      <img
                        :src="`https://randomuser.me/api/portraits/men/${i + 10}.jpg`"
                        alt="成员头像"
                      />
                      <div class="member-name">成员{{ i }}</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <a-empty v-else description="您还没有创建团队空间">
              <template #extra>
                <a-button type="primary" @click="handleCreateTeamSpace">立即创建</a-button>
              </template>
            </a-empty>
          </div>

          <!-- 我加入的空间 -->
          <div v-if="selectedKeys[0] === 'joined' && !$route.params.spaceId">
            <div v-if="joinedSpaces.length > 0">
              <div class="detail-header">
                <h2>我加入的空间</h2>
                <a-tag color="blue">{{ joinedSpaces.length }}/3</a-tag>
              </div>
              <a-row :gutter="[16, 16]">
                <a-col :span="8" v-for="space in joinedSpaces" :key="space.spaceId">
                  <a-card hoverable class="space-card">
                    <template #title>
                      <div class="card-title">{{ space.spaceName }}</div>
                    </template>
                    <template #extra>
                      <a-tag color="blue">成员</a-tag>
                    </template>
                    <a-descriptions :column="1">
                      <a-descriptions-item label="成员数量">
                        {{ parseInt(space.maxCount) || 0 }}
                      </a-descriptions-item>
                      <a-descriptions-item label="图片数量">
                        {{ parseInt(space.totalCount) || 0 }}
                      </a-descriptions-item>
                      <a-descriptions-item label="空间大小">
                        {{ formatSize(space.totalSize) }}
                      </a-descriptions-item>
                    </a-descriptions>
                    <template #actions>
                      <a-button type="primary" block @click="handleEnterSpace(space)">
                        进入空间
                      </a-button>
                    </template>
                  </a-card>
                </a-col>
              </a-row>
            </div>
            <a-empty v-else description="您还没有加入任何团队空间(待开发，可忽略)">
              <template #extra>
                <a-button type="primary" @click="showJoinModal = true"> 加入空间 </a-button>
              </template>
            </a-empty>
          </div>

          <!-- 子路由渲染区域 -->
          <router-view v-if="$route.params.spaceId"></router-view>
        </a-spin>
      </div>
    </div>

    <!-- 加入团队空间弹窗 -->
    <a-modal
      v-model:visible="showJoinModal"
      title="加入团队空间"
      @ok="handleJoinTeamSpace"
      :confirmLoading="joinLoading"
      okText="确定"
      cancelText="取消"
    >
      <a-form :model="joinForm">
        <a-form-item label="团队空间ID" required>
          <a-input-number
            v-model:value="joinForm.spaceId"
            style="width: 100%"
            placeholder="请输入要加入的团队空间ID"
          />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
  import { ref, onMounted, reactive, watch } from 'vue'
  import { message } from 'ant-design-vue'
  import {
    UserOutlined,
    TeamOutlined,
    HddOutlined,
    FileImageOutlined,
    CalendarOutlined,
  } from '@ant-design/icons-vue'
  import dayjs from 'dayjs'
  import * as tuanduikongjianmokuai from '@/api/tuanduikongjianmokuai'
  import { useRouter, useRoute } from 'vue-router'

  // 页面状态
  const loading = ref(false)
  const isLoggedIn = ref(false)
  const loginLoading = ref(false)
  const selectedKeys = ref<string[]>(['created'])

  // 团队空间数据
  interface TeamSpace {
    spaceId: string
    userId: string
    spaceName: string
    createUserId: string
    nickName: string
    spaceLevel: string
    maxSize: string
    maxCount: string
    totalSize: string
    totalCount: string
    createTime: string
    spaceType: number
    isCreator: boolean
    memberCount?: number
  }

  // 空间详情数据
  // interface SpaceDetail {
  //   spaceId: number
  //   spaceName: string
  //   spaceLevel: number
  //   createUserId: number
  //   createUserName: string
  //   createTime: number
  //   updateTime: number
  //   totalSize: number
  //   maxSize: number
  //   usagePercent: number
  //   totalMembers: number
  //   adminCount: number
  //   normalCount: number
  //   members: SpaceMember[]
  // }

  // interface SpaceMember {
  //   userId: number
  //   userName: string
  //   nickName: string
  //   avatar: string
  //   roleName: string
  //   joinTime: number
  // }

  const myCreatedSpace = ref<TeamSpace | null>(null)
  const joinedSpaces = ref<TeamSpace[]>([])
  const hasCreatedSpace = ref(false)

  // 加入团队空间相关
  const showJoinModal = ref(false)
  const joinLoading = ref(false)
  const joinForm = reactive({
    spaceId: undefined as number | undefined,
  })

  // 空间详情数据
  // const showSpaceDetail = ref(false)
  // const currentSpaceDetail = ref<SpaceDetail | null>(null)
  // const spaceDetailLoading = ref(false)

  // 格式化文件大小
  const formatSize = (bytes: string | number) => {
    const numBytes = typeof bytes === 'string' ? parseInt(bytes) : bytes
    if (numBytes === 0) return '0 B'
    const k = 1024
    const sizes = ['B', 'KB', 'MB', 'GB', 'TB']
    const j = Math.floor(Math.log(numBytes) / Math.log(k))
    return parseFloat((numBytes / Math.pow(k, j)).toFixed(2)) + ' ' + sizes[j]
  }

  // 格式化日期
  const formatDate = (timestamp: number | string) => {
    return dayjs(Number(timestamp)).format('YYYY-MM-DD HH:mm:ss')
  }

  // 获取空间级别文本
  const getSpaceLevelText = (level: number) => {
    const levels: Record<number, string> = {
      0: '普通版',
      1: '专业版',
      2: '旗舰版',
    }
    return levels[level] || '普通版'
  }

  // 获取空间级别颜色
  const getSpaceLevelColor = (level: number) => {
    const colors: Record<number, string> = {
      0: '#52c41a',
      1: '#1890ff',
      2: '#722ed1',
    }
    return colors[level] || '#52c41a'
  }

  // 获取空间级别样式类
  const getSpaceLevelClass = (level: number) => {
    const classes: Record<number, string> = {
      0: 'normal-space',
      1: 'pro-space',
      2: 'flagship-space',
    }
    return classes[level] || 'normal-space'
  }

  // 获取进度条颜色
  const getProgressColors = (level: number) => {
    const colors: Record<number, { '0%': string; '100%': string }> = {
      0: {
        '0%': '#52c41a',
        '100%': '#87d068',
      },
      1: {
        '0%': '#1890ff',
        '100%': '#69c0ff',
      },
      2: {
        '0%': '#722ed1',
        '100%': '#b37feb',
      },
    }
    return colors[level] || colors[0]
  }

  // 团队空间登录
  const handleSpaceLogin = async () => {
    loginLoading.value = true
    try {
      const res = await tuanduikongjianmokuai.spaceUserLoginUsingPost()
      if (res.data.code === 200) {
        message.success('登录成功')
        isLoggedIn.value = true
        await fetchSpaceData()
      } else {
        message.error(res.data.message || '登录失败')
      }
    } catch {
      message.error('登录失败')
    } finally {
      loginLoading.value = false
    }
  }

  // 获取空间数据
  const fetchSpaceData = async () => {
    loading.value = true
    try {
      const res = await tuanduikongjianmokuai.getTeamSpaceInfoUsingGet()
      if (res.data.code === 200 && res.data.data) {
        const spaces = res.data.data as TeamSpace[]
        // 分离创建的和加入的空间
        myCreatedSpace.value = spaces.find(space => space.isCreator) || null
        joinedSpaces.value = spaces.filter(space => !space.isCreator)
        hasCreatedSpace.value = !!myCreatedSpace.value

        // 如果有创建的空间，默认选中"我创建的空间"标签
        if (myCreatedSpace.value) {
          selectedKeys.value = ['created']
        }
        // 否则如果有加入的空间，默认选中"我加入的空间"标签
        else if (joinedSpaces.value.length > 0) {
          selectedKeys.value = ['joined']
        }
      }
    } catch {
      message.error('获取空间数据失败')
    } finally {
      loading.value = false
    }
  }

  // 创建团队空间
  const handleCreateTeamSpace = async () => {
    try {
      const res = await tuanduikongjianmokuai.createTeamSpaceUsingPost()
      if (res.data.code === 200) {
        message.success('创建成功')
        await fetchSpaceData()
        selectedKeys.value = ['created']
      } else {
        message.info(res.data.message || '创建失败')
      }
    } catch {
      message.error('创建失败')
    }
  }

  // 加入团队空间
  const handleJoinTeamSpace = async () => {
    if (!joinForm.spaceId) {
      message.warning('请输入团队空间ID')
      return
    }

    joinLoading.value = true
    try {
      const res = await tuanduikongjianmokuai.joinTeamSpaceUsingPost({
        spaceId: joinForm.spaceId,
      })
      if (res.data.code === 200) {
        message.success('加入成功')
        showJoinModal.value = false
        joinForm.spaceId = undefined
        await fetchSpaceData()
        selectedKeys.value = ['joined']
      } else {
        message.error(res.data.message || '加入失败')
      }
    } catch {
      message.error('加入失败')
    } finally {
      joinLoading.value = false
    }
  }

  // 处理菜单点击
  const handleMenuClick = (key: string) => {
    selectedKeys.value = [key]
    // 如果当前在空间详情页,需要返回列表
    if (route.params.spaceId) {
      router.push('/team/space')
    }
  }

  // 进入空间
  const handleEnterSpace = async (space: TeamSpace) => {
    try {
      router.push(`/team/space/${space.spaceId}`)
    } catch {
      message.error('进入空间失败')
    }
  }

  // 初始化
  const router = useRouter()
  const route = useRoute()
  onMounted(async () => {
    // 尝试获取空间数据，如果成功则说明已登录
    try {
      const res = await tuanduikongjianmokuai.getTeamSpaceInfoUsingGet()
      if (res.data.code === 200) {
        isLoggedIn.value = true
        await fetchSpaceData()
      }
    } catch {
      // 获取失败说明未登录，不做处理
    }
  })

  // 监听路由变化
  watch(
    () => route.params.spaceId,
    newVal => {
      if (!newVal) {
        // 如果没有 spaceId,说明回到了列表页,恢复之前选中的标签
        if (myCreatedSpace.value) {
          selectedKeys.value = ['created']
        } else if (joinedSpaces.value.length > 0) {
          selectedKeys.value = ['joined']
        }
      }
    }
  )
</script>

<style scoped>
  .team-space-container {
    height: 100vh;
    background: var(--theme-background);
    overflow: hidden;
    transition: all 0.3s ease;
  }

  .login-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
  }

  .space-layout {
    display: flex;
    height: 100vh;
    overflow: hidden;
  }

  .space-menu {
    position: fixed;
    left: 0;
    top: 64px;
    bottom: 0;
    width: 256px;
    background: var(--theme-surface);
    border-right: 1px solid var(--theme-border);
    display: flex;
    flex-direction: column;
    z-index: 100;
    transition: all 0.3s ease;
  }

  .menu-header {
    padding: 16px;
    text-align: center;
    border-bottom: 1px solid var(--theme-border);
  }

  .menu-header h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 500;
    color: var(--theme-text);
    transition: color 0.3s ease;
  }

  .menu-footer {
    padding: 16px;
    border-top: 1px solid var(--theme-border);
    background: var(--theme-background);
    transition: all 0.3s ease;
  }

  .space-main {
    flex: 1;
    margin-left: 256px;
    padding: 24px;
    background: var(--theme-background);
    overflow-y: auto;
    transition: all 0.3s ease;
  }

  .space-main::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }

  .space-main::-webkit-scrollbar-thumb {
    background: var(--theme-border);
    border-radius: 3px;
    transition: background 0.3s ease;
  }

  .space-main::-webkit-scrollbar-track {
    background: var(--theme-background);
    border-radius: 3px;
    transition: background 0.3s ease;
  }

  /* 确保所有Ant Design组件都使用主题色 */
  :deep(.ant-menu) {
    background: var(--theme-surface);
    border-right: none;
    transition: all 0.3s ease;
  }

  :deep(.ant-menu-item) {
    color: var(--theme-text);
    background: var(--theme-background);
    border-radius: 6px;
    margin: 4px 8px;
    transition: all 0.3s ease;
  }

  :deep(.ant-menu-item:hover) {
    background: var(--theme-primary);
    color: var(--theme-surface);
  }

  :deep(.ant-menu-item-selected) {
    background: var(--theme-primary);
    color: var(--theme-surface);
  }

  :deep(.ant-menu-item-selected::after) {
    border-right-color: var(--theme-primary);
  }

  :deep(.ant-tag) {
    border-color: var(--theme-border);
    transition: all 0.3s ease;
  }

  :deep(.ant-descriptions) {
    background: var(--theme-surface);
    border-radius: 8px;
    padding: 16px;
    transition: all 0.3s ease;
  }

  :deep(.ant-descriptions-item-label) {
    color: var(--theme-textSecondary);
    font-weight: 500;
    transition: color 0.3s ease;
  }

  :deep(.ant-descriptions-item-content) {
    color: var(--theme-text);
    transition: color 0.3s ease;
  }

  :deep(.ant-empty) {
    background: var(--theme-surface);
    border-radius: 8px;
    padding: 24px;
    transition: all 0.3s ease;
  }

  :deep(.ant-empty-description) {
    color: var(--theme-textSecondary);
    transition: color 0.3s ease;
  }

  :deep(.ant-modal-content) {
    background: var(--theme-surface);
    border: 1px solid var(--theme-border);
    box-shadow: 0 4px 20px var(--theme-shadow);
    transition: all 0.3s ease;
  }

  :deep(.ant-modal-header) {
    background: var(--theme-background);
    border-bottom: 1px solid var(--theme-border);
    transition: all 0.3s ease;
  }

  :deep(.ant-modal-title) {
    color: var(--theme-text);
    transition: color 0.3s ease;
  }

  :deep(.ant-modal-body) {
    background: var(--theme-surface);
    transition: all 0.3s ease;
  }

  :deep(.ant-form-item-label > label) {
    color: var(--theme-text);
    transition: color 0.3s ease;
  }

  :deep(.ant-input-number) {
    background: var(--theme-surface);
    border-color: var(--theme-border);
    color: var(--theme-text);
    transition: all 0.3s ease;
  }

  :deep(.ant-input-number:hover) {
    border-color: var(--theme-primary);
  }

  :deep(.ant-input-number:focus) {
    border-color: var(--theme-primary);
    box-shadow: 0 0 0 2px var(--theme-primary);
  }

  :deep(.ant-btn) {
    transition: all 0.3s ease;
  }

  :deep(.ant-btn-primary) {
    background: var(--theme-primary);
    border-color: var(--theme-primary);
    transition: all 0.3s ease;
  }

  :deep(.ant-btn-primary:hover) {
    background: var(--theme-secondary);
    border-color: var(--theme-secondary);
  }

  :deep(.ant-btn-default) {
    background: var(--theme-surface);
    border-color: var(--theme-border);
    color: var(--theme-text);
    transition: all 0.3s ease;
  }

  :deep(.ant-btn-default:hover) {
    border-color: var(--theme-primary);
    color: var(--theme-primary);
  }

  :deep(.ant-spin-dot-item) {
    background-color: var(--theme-primary);
    transition: background-color 0.3s ease;
  }

  /* 确保所有可能的白色背景都被覆盖 */
  .team-space-container * {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
  }

  /* 修复可能遗漏的卡片背景 */
  .space-card,
  .stat-card,
  .pro-card {
    background: var(--theme-surface) !important;
    border-color: var(--theme-border) !important;
    color: var(--theme-text) !important;
  }

  /* 修复可能遗漏的文字颜色 */
  .card-title,
  .pro-card-title,
  .space-title h2,
  .header-main h2,
  .detail-header h2 {
    color: var(--theme-text) !important;
  }

  /* 修复可能遗漏的边框和阴影 */
  .space-card,
  .stat-card,
  .pro-card,
  .space-detail,
  .space-header {
    border-color: var(--theme-border) !important;
    box-shadow: 0 2px 8px var(--theme-shadow) !important;
  }

  /* 确保所有Ant Design组件的背景都使用主题色 */
  :deep(.ant-card) {
    background: var(--theme-surface) !important;
    border-color: var(--theme-border) !important;
    transition: all 0.3s ease;
  }

  :deep(.ant-card-head) {
    background: var(--theme-background) !important;
    border-bottom-color: var(--theme-border) !important;
  }

  :deep(.ant-card-body) {
    background: var(--theme-surface) !important;
  }

  :deep(.ant-row) {
    background: transparent !important;
  }

  :deep(.ant-col) {
    background: transparent !important;
  }

  :deep(.ant-space) {
    background: transparent !important;
  }

  :deep(.ant-result) {
    background: var(--theme-surface) !important;
  }

  :deep(.ant-result-title) {
    color: var(--theme-text) !important;
  }

  :deep(.ant-result-subtitle) {
    color: var(--theme-textSecondary) !important;
  }

  /* 确保所有可能的容器背景都使用主题色 */
  .team-space-container,
  .space-layout,
  .space-main,
  .space-detail,
  .space-header,
  .space-stats,
  .space-extra-row,
  .detail-header {
    background: var(--theme-background) !important;
  }

  /* 确保所有卡片和组件都使用主题色 */
  .space-card,
  .stat-card,
  .pro-card,
  .notice-card,
  .quick-card,
  .honor-card,
  .activity-card,
  .members-card {
    background: var(--theme-surface) !important;
    border-color: var(--theme-border) !important;
  }

  /* 确保所有文字都使用主题色 */
  .team-space-container,
  .space-layout,
  .space-main,
  .space-detail,
  .space-header,
  .space-stats,
  .space-extra-row,
  .detail-header,
  .space-card,
  .stat-card,
  .pro-card {
    color: var(--theme-text) !important;
  }

  /* 确保所有边框都使用主题色 */
  .team-space-container,
  .space-layout,
  .space-main,
  .space-detail,
  .space-header,
  .space-stats,
  .space-extra-row,
  .detail-header,
  .space-card,
  .stat-card,
  .pro-card {
    border-color: var(--theme-border) !important;
  }

  /* 确保所有阴影都使用主题色 */
  .team-space-container,
  .space-layout,
  .space-main,
  .space-detail,
  .space-header,
  .space-stats,
  .space-extra-row,
  .detail-header,
  .space-card,
  .stat-card,
  .pro-card {
    box-shadow: 0 2px 8px var(--theme-shadow) !important;
  }

  .space-detail {
    background: var(--theme-surface);
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 4px 20px var(--theme-shadow);
    border: 1px solid var(--theme-border);
    transition: all 0.3s ease;
  }

  .space-header {
    margin-bottom: 24px;
    padding: 20px;
    background: var(--theme-background);
    border-radius: 12px;
    border: 1px solid var(--theme-border);
    transition: all 0.3s ease;
  }

  .space-title {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 12px;
  }

  .space-title h2 {
    margin: 0;
    font-size: 24px;
    font-weight: 600;
    color: var(--theme-text);
    transition: color 0.3s ease;
  }

  .space-tags {
    display: flex;
    gap: 8px;
  }

  .space-meta {
    display: flex;
    gap: 24px;
    color: var(--theme-textSecondary);
    font-size: 14px;
    transition: color 0.3s ease;
  }

  .meta-item {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--theme-textSecondary);
    transition: color 0.3s ease;
  }

  .space-stats {
    margin-bottom: 24px;
  }

  .stat-card {
    height: 100%;
    transition: all 0.3s ease;
    background: var(--theme-surface);
    border: 1px solid var(--theme-border);
    box-shadow: 0 2px 8px var(--theme-shadow);
  }

  .stat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px var(--theme-shadow);
  }

  .card-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 600;
    color: var(--theme-text);
    transition: color 0.3s ease;
  }

  .stat-content {
    padding: 16px;
  }

  .stat-main {
    text-align: center;
    margin-bottom: 16px;
  }

  .stat-number {
    font-size: 28px;
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: 4px;
    color: var(--theme-text);
    transition: color 0.3s ease;
  }

  .stat-label {
    font-size: 13px;
    color: var(--theme-textSecondary);
    transition: color 0.3s ease;
  }

  .stat-info {
    margin-top: 8px;
    font-size: 13px;
    color: var(--theme-textSecondary);
    text-align: right;
    transition: color 0.3s ease;
  }

  :deep(.ant-progress-line) {
    margin: 0;
  }

  :deep(.ant-card-head) {
    min-height: auto;
    padding: 12px 16px;
    border-bottom: 1px solid var(--theme-border);
    background: var(--theme-background);
    transition: all 0.3s ease;
  }

  :deep(.ant-card-head-title) {
    padding: 0;
    color: var(--theme-text);
    transition: color 0.3s ease;
  }

  :deep(.ant-card-body) {
    padding: 0;
  }

  .space-card {
    height: 100%;
    transition: all 0.3s ease;
    background: var(--theme-surface);
    border: 1px solid var(--theme-border);
    box-shadow: 0 2px 8px var(--theme-shadow);
  }

  .space-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px var(--theme-shadow);
  }

  .detail-header {
    margin-bottom: 24px;
  }

  .header-main {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 12px;
  }

  .header-main h2 {
    margin: 0;
    font-size: 24px;
    font-weight: 600;
    color: var(--theme-text);
    transition: color 0.3s ease;
  }

  .header-tags {
    display: flex;
    gap: 8px;
  }

  .header-meta {
    display: flex;
    gap: 24px;
    color: var(--theme-textSecondary);
    font-size: 14px;
    transition: color 0.3s ease;
  }

  .meta-item {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--theme-textSecondary);
    transition: color 0.3s ease;
  }

  /* 旗舰版特效 */
  .flagship-space.stat-card {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--theme-primary);
    background: linear-gradient(135deg, var(--theme-surface) 0%, var(--theme-background) 100%);
    transition: all 0.3s ease;
  }

  .flagship-space.stat-card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
      45deg,
      transparent 0%,
      var(--theme-primary) 50%,
      transparent 100%
    );
    animation: shine 3s infinite;
    pointer-events: none;
    opacity: 0.1;
  }

  .flagship-space.stat-card .stat-number {
    background: linear-gradient(45deg, var(--theme-primary), var(--theme-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: pulse 2s infinite;
  }

  .flagship-space.stat-card :deep(.ant-card-head) {
    background: linear-gradient(135deg, var(--theme-background) 0%, var(--theme-surface) 100%);
    border-bottom: none;
    box-shadow: 0 2px 8px var(--theme-shadow);
    transition: all 0.3s ease;
  }

  /* 专业版特效 */
  .pro-space.stat-card {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--theme-secondary);
    background: linear-gradient(135deg, var(--theme-surface) 0%, var(--theme-background) 100%);
    transition: all 0.3s ease;
  }

  .pro-space.stat-card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
      45deg,
      transparent 0%,
      var(--theme-secondary) 50%,
      transparent 100%
    );
    animation: shine 4s infinite;
    pointer-events: none;
    opacity: 0.1;
  }

  .pro-space.stat-card .stat-number {
    background: linear-gradient(45deg, var(--theme-secondary), var(--theme-primary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  /* 普通版样式 */
  .normal-space.stat-card {
    border: 1px solid var(--theme-primary);
    background: linear-gradient(135deg, var(--theme-surface) 0%, var(--theme-background) 100%);
    transition: all 0.3s ease;
  }

  .normal-space.stat-card .stat-number {
    color: var(--theme-primary);
    transition: color 0.3s ease;
  }

  /* 动画效果 */
  @keyframes shine {
    0% {
      transform: translate(-50%, -50%) rotate(0deg);
    }
    100% {
      transform: translate(-50%, -50%) rotate(360deg);
    }
  }

  @keyframes pulse {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.05);
    }
    100% {
      transform: scale(1);
    }
  }

  /* 卡片悬浮效果 */
  .stat-card:hover {
    transform: translateY(-4px);
  }

  .normal-space.stat-card:hover {
    box-shadow: 0 8px 16px var(--theme-shadow);
  }

  .pro-space.stat-card:hover {
    box-shadow: 0 8px 16px var(--theme-shadow);
  }

  .flagship-space.stat-card:hover {
    box-shadow: 0 8px 24px var(--theme-shadow);
  }

  /* 进度条样式 */
  .flagship-space :deep(.ant-progress-bg) {
    background: linear-gradient(90deg, var(--theme-primary), var(--theme-secondary));
  }

  .pro-space :deep(.ant-progress-bg) {
    background: linear-gradient(90deg, var(--theme-secondary), var(--theme-primary));
  }

  .normal-space :deep(.ant-progress-bg) {
    background: linear-gradient(90deg, var(--theme-primary), var(--theme-secondary));
  }

  /* 标题样式 */
  .flagship-space :deep(.ant-card-head-title) {
    background: linear-gradient(45deg, var(--theme-primary), var(--theme-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 600;
  }

  .pro-space :deep(.ant-card-head-title) {
    background: linear-gradient(45deg, var(--theme-secondary), var(--theme-primary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 600;
  }

  .normal-space :deep(.ant-card-head-title) {
    color: var(--theme-primary);
    font-weight: 500;
    transition: color 0.3s ease;
  }

  /* 图标样式 */
  .flagship-space :deep(.anticon) {
    color: var(--theme-primary);
    font-size: 20px;
    transition: color 0.3s ease;
  }

  .pro-space :deep(.anticon) {
    color: var(--theme-secondary);
    font-size: 18px;
    transition: color 0.3s ease;
  }

  .normal-space :deep(.anticon) {
    color: var(--theme-primary);
    font-size: 16px;
    transition: color 0.3s ease;
  }

  .space-banner {
    position: relative;
    height: 160px;
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 24px;
    transition: all 0.3s ease;
  }
  
  .banner-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.85);
  }
  
  .banner-mask {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.05));
  }
  
  .banner-content {
    position: absolute;
    left: 36px;
    top: 50%;
    transform: translateY(-50%);
    color: #fff;
  }
  
  .banner-title {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 8px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  }
  
  .banner-desc {
    font-size: 16px;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  }
  
  .banner-actions {
    margin-top: 12px;
    display: flex;
    gap: 12px;
  }

  .space-extra-row.pro-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    margin-top: 24px;
  }

  .pro-card {
    flex: 1;
    min-width: 200px;
    max-width: 280px;
    background: var(--theme-surface);
    border: 1px solid var(--theme-border);
    border-radius: 16px;
    padding: 20px 16px 16px 16px;
    box-shadow: 0 2px 8px var(--theme-shadow);
    transition: all 0.3s ease;
  }

  .pro-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px var(--theme-shadow);
  }

  .pro-card-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--theme-text);
    margin-bottom: 16px;
    text-align: center;
    transition: color 0.3s ease;
  }

  .pro-card-content {
    color: var(--theme-textSecondary);
    font-size: 14px;
    line-height: 1.6;
    transition: color 0.3s ease;
  }

  .pro-card-content ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .pro-card-content li {
    margin-bottom: 8px;
    padding-left: 20px;
    position: relative;
  }

  .pro-card-content li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: var(--theme-primary);
    font-weight: bold;
    transition: color 0.3s ease;
  }

  .pro-card-content a {
    color: var(--theme-primary);
    text-decoration: none;
    transition: color 0.3s ease;
  }

  .pro-card-content a:hover {
    color: var(--theme-secondary);
  }

  .badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: var(--theme-textSecondary);
    transition: color 0.3s ease;
  }

  .badge img {
    width: 36px;
    height: 36px;
    margin-bottom: 4px;
  }

  .badge.gold span {
    color: var(--theme-primary);
    transition: color 0.3s ease;
  }

  .badge.silver span {
    color: var(--theme-textSecondary);
    transition: color 0.3s ease;
  }

  .badge.bronze span {
    color: var(--theme-secondary);
    transition: color 0.3s ease;
  }

  .activity-list {
    color: var(--theme-text);
    font-size: 15px;
    margin-bottom: 0;
    padding-left: 0;
    list-style: none;
    transition: color 0.3s ease;
  }

  .activity-list li {
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    line-height: 1.7;
  }

  .dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--theme-primary);
    margin-right: 8px;
    transition: background 0.3s ease;
  }

  .activity-action {
    color: var(--theme-primary);
    margin: 0 4px;
    transition: color 0.3s ease;
  }

  .activity-time {
    color: var(--theme-textSecondary);
    font-size: 13px;
    margin-left: 8px;
    transition: color 0.3s ease;
  }

  .members-wall-pro {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
  }

  .member-avatar-pro {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 48px;
  }

  .member-avatar-pro img {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 2px solid var(--theme-surface);
    box-shadow: 0 1px 4px var(--theme-shadow);
    margin-bottom: 2px;
    transition: box-shadow 0.2s, transform 0.2s;
  }

  .member-avatar-pro img:hover {
    box-shadow: 0 4px 16px var(--theme-shadow);
    transform: scale(1.08);
  }

  .member-name {
    font-size: 12px;
    color: var(--theme-textSecondary);
    text-align: center;
    margin-top: 2px;
    transition: color 0.3s ease;
  }
  @media (max-width: 1200px) {
    .space-extra-row.pro-cards {
      flex-wrap: wrap;
      gap: 16px;
    }
    .pro-card {
      min-width: 180px;
      max-width: 100%;
      padding: 18px 10px 14px 10px;
    }
  }
  @media (max-width: 900px) {
    .space-extra-row.pro-cards {
      flex-direction: column;
      gap: 16px;
    }
    .pro-card {
      width: 100%;
      min-width: 0;
      max-width: 100%;
    }
  }
</style>
